<template>
  <div class="echart-demo" id="demo"></div>
</template>

<script setup lang="ts">
//引入echart和json数据
import * as echarts from 'echarts'
import ShAhZj from './map.json'
import { onMounted } from 'vue'

//设置echart数据
let setOption = () => {
  //获取echart对象
  let dom = document.getElementById('demo')
  const chinaGeoCoordMap = {
    // 黑龙江: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京: [116.4551, 40.2539],
    辽宁: [123.1238, 42.1216],
    河北: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    陕西: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    四川: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    山东: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    湖北: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福建: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广东: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891]
  }
  const arr: any = []
  //目的地
  const destination = [126.69263, 46.257164]
  for (let key in chinaGeoCoordMap) {
    arr.push([
      {
        // 出发
        coord: chinaGeoCoordMap[key], // 海南
        value: 1
      },
      {
        // 目的地
        coord: destination
      }
    ])
  }
  if (dom) {
    let myEchart = echarts.init(dom)
    //注册地图
    echarts.registerMap('哈尔滨', ShAhZj)
    let option = {
      geo: {
        map: '哈尔滨',
        aspectScale: 0.8,
        layoutCenter: ['50%', '50%'], //地图位置
        layoutSize: '75%',
        itemStyle: {
          normal: {
            shadowColor: '#276fce',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 0.2
          },
          emphasis: {
            areaColor: '#276fce'
          }
        }
      },
      series: [
        {
          tooltip: {
            trigger: 'item'
          },

          name: '数据',
          type: 'map',
          map: '哈尔滨', // 自定义扩展图表类型
          // showLegendSymbol: true, // 存在legend时显示
          label: {
            // 文字
            // show: true,
            color: '#fff',
            fontSize: 10
          },
          itemStyle: {
            // 地图样式
            areaColor: '#1970D2', //区域颜色
            // borderColor: '#ffffff', //边框颜色
            // borderWidth: 1
            normal: {
              areaColor: '#409eff',
              borderColor: '#1cccff',
              borderWidth: 1.5
            },
            emphasis: {
              areaColor: '#02102b',
              label: {
                color: '#fff'
              }
            }
          },
          emphasis: {
            // 鼠标移入时显示的默认样式
            itemStyle: {
              areaColor: '#1970D2',
              borderColor: '#404a59',
              borderWidth: 1
            },
            label: {
              // 文字
              show: true,
              color: '#0D5EFF',
              fontSize: 12,
              fontWeight: 600
            }
          },
          data: []
        },
        // 设置飞线样式
        {
          type: 'lines',
          coordinateSystem: 'geo',
          zlevel: 100,
          effect: {
            show: true,
            period: 14, // 图标飞跃速度，值越小速度越快
            trailLength: 0.6, // 尾迹长度[0,1]值越大，尾迹越长
            symbol: 'pin', // 图标类型
            symbolSize: 4, // 图标大小
            color: '#f5f3b3' // 图标颜色
          },

          lineStyle: {
            color: '#000',
            normal: {
              show: true,
              width: 1, //尾迹线条宽度
              opacity: 0.1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              color: '#44add00f' // 飞线颜色
            }
          },
          // 飞线数据
          data: arr
        },

        // 中心点设置
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 15,
          rippleEffect: {
            period: 3,
            brushType: 'fill', // 动画样式 fill stroke
            scale: 60,
            color: '#7ce7fd',
            number: 2
          },
          symbol: 'circle', // 图标样式
          symbolSize: 2,
          itemStyle: {
            color: '#5cc8d4'
          },
          // 中心点数据
          data: [
            {
              name: '哈尔滨',
              value: [...destination, 10]
            }
          ]
        }
      ]
    }
    myEchart.setOption(option)
    window.addEventListener('resize', function () {
      myEchart.resize()
    })
  }
}

onMounted(() => {
  setOption()
})
</script>

<style scoped lang="scss">
.echart-demo {
  width: 100%;
  height: 100%;
  background: white;
}
</style>
